<template>
	<gui-page :fullPage="true" ref="guiPage">
		<view slot="gBody" class="gui-flex1 gui-flex gui-columns">
			<view class="content">
				<view class="box bgfff flex-dc-ac radius10">
					<image class="service" src="../../static/user/service.png" mode="widthFix" style="height: auto;">
					</image>
					<text class="primary-color f36">客服微信</text>
					<view class="code radius15">
					    <gui-imageLoading width="330" :src="dataObj.image" mode="widthFix" :showOpacity="true"></gui-imageLoading>
					</view>
					<text class="f26 c666">{{dataObj.synopsis}}</text>
					<text class="f24 c666">在线时间：{{dataObj.workShift}}</text>
					<text class="cred c30 bold phone" @tap="callPhone(dataObj.phone)">拨打客服电话</text>
				</view>
			</view>
		</view>
	</gui-page>
</template>

<script>
	export default {
		data() {
			return {
				dataObj: {}
			}
		},
		onLoad() {
			this.getService()
		},
		methods: {
			callPhone(phone){
				this.$u.makePhone(phone)
			},
			getService() {
				this.$http.get('/api/customerService').then(res => {
					let result = res.data
					console.log('客服', result)
					this.dataObj = result
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: linear-gradient(180deg, #FF7272 50%, #FF0019 100%);
	}

	.content {
		padding: 32rpx 40rpx;

	}

	.box {
		margin: 0 auto;
		padding: 64rpx 120rpx 32rpx 120rpx;

		.service {
			width: 300rpx;
		}

		.code {
			width: 390rpx;
			min-height: 200rpx;
			padding: 25rpx;
			border: 4px solid #FF7272;
			margin-top: 36rpx;
			margin-bottom: 20rpx;

			
		}

		.c666 {
			margin-top: 10rpx;
		}

		.phone {
			margin-top: 30rpx;
		}
	}
</style>